<template>

  <layout title="Calendar日历">
    <layout-content title="基础使用">
      <tn-calendar v-model="defaultDate"></tn-calendar>
    </layout-content>

    <layout-content title="设置最小/最大可选日期">
      <tn-calendar v-model="minMaxDate" min-date="2020/04/01" max-date="2022/06/01"></tn-calendar>
    </layout-content>

    <layout-content title="选中多个日期">
      <tn-calendar v-model="multiDate" mode="multi"></tn-calendar>
    </layout-content>

    <layout-content title="日期范围">
      <tn-calendar v-model="rangeDate" mode="range" start-text="入住" end-text="离店"></tn-calendar>
    </layout-content>

    <layout-content title="自定义颜色">
      <tn-calendar
        v-model="customColorRangeDate"
        mode="range"
        color="tn-color-grey"
        active-color="tn-color-cyan"
        active-bg-color="tn-bg-cyan--light"
        range-color="tn-color-indigo"
        range-bg-color="tn-bg-indigo--light"
      ></tn-calendar>
    </layout-content>

  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnCalendar from '@/tuniao-ui/components/tn-calendar/src/Calendar.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

let defaultDate = ref<string>('2022/06/25')
let minMaxDate = ref<string>('')
let multiDate = ref<string[]>(['2022/04/01','2022/05/01','2022/05/30'])
let rangeDate = ref<string[]>(['2022/04/01', '2022/05/20'])
let customColorRangeDate = ref<string[]>([])
</script>

<style lang="scss" scoped>
</style>
